import React from 'react'
import {Modal, Button, Switch} from 'antd';
import DescriptionList from '../../components/DescriptionList';

const {Description} = DescriptionList;

export default class CSetting extends React.PureComponent {

  handleSwitchTheme = () => {
    this.props.dispatch({
      type: 'global/switchTheme',
    });
  };

  handleCancel = () => {
    this.props.dispatch({
      type: 'global/hideSettingModal',
    });
  };

  render() {
    const {lightTheme, collapsed, settingModalVisable, toggleSider} = this.props;

    return (
      <Modal
        title="界面设置"
        visible={settingModalVisable}
        onCancel={this.handleCancel}
        footer={[
          <Button key="close" onClick={this.handleCancel}>关闭</Button>,
        ]}
      >
        <DescriptionList>
          <Description term="主题设置">
            <Switch checkedChildren="暗" unCheckedChildren="亮" onChange={this.handleSwitchTheme} checked={!lightTheme}/>
          </Description>
          <Description term="菜单设置">
            <Switch checkedChildren="缩" unCheckedChildren="展" onChange={toggleSider} checked={collapsed}/>
          </Description>
        </DescriptionList>
      </Modal>
    );
  }
}
